import { fromEvent } from 'rxjs';
import { map, takeUntil, concatAll, filter } from 'rxjs/operators';
function dragCell(ele: HTMLDivElement) {
    const mouseDown = fromEvent<any>(ele, "mousedown")
      const mouseMove = fromEvent<any>(document, "mousemove");
      const mouseUp: any = fromEvent<any>(document, "mouseup");
      mouseDown
      .pipe(
        map((e: any) => {
          const { left, top } = e.target.getBoundingClientRect();
          const clickOffsetX = e.clientX - left;
          const clickOffsetY = e.clientY - top;
          return {
            x:clickOffsetX,
            y:clickOffsetY
          };
        }),
        map((postion: any) => {
          return mouseMove.pipe(
            takeUntil(mouseUp),
            map((moveEvent: MouseEvent) => ({
              x: moveEvent.clientX - postion.x,
              y: moveEvent.clientY - postion.y
            }))
          );
        }),
        concatAll()
      )
      .subscribe((position: any) => {
          ele.style.top = position.y + 'px';
          ele.style.left = position.x + 'px';
          localStorage.setItem('standart_top', position.y);
          localStorage.setItem('standard_left', position.x);
      });
}
export  function start () {
    let standardCellEle = document.createElement('div') as HTMLDivElement;
    let top = 50;
    let left =  50;
    if(localStorage.getItem('standart_top') != undefined) {
        top = Number(localStorage.getItem('standart_top'));
    }
    if(localStorage.getItem('standard_left') != undefined) {
        left = Number(localStorage.getItem('standard_left'));
    }
    standardCellEle.setAttribute('style', `width: 58px;height: 18px; position: fixed; border: 1px solid red; top: ${top}px;left: ${left}px;z-index: 1000;`);
    // document.querySelector('body').appendChild(standardCellEle);
    dragCell(standardCellEle);
}